<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog system-user-dialog"
      :custom-class="'panna-dialog_big'"
      :append-to-body="true"
      :title="dataList.AddTempTask"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
      @closed="closeDialog"
    >
      <el-divider class="el-divider-specail" content-position="left"
        ><span>{{ dataList.VerifyEquip }}</span>
        <el-button
          type="primary"
          style="margin-left: 20px"
          @click="choiceDevice"
          >{{ dataList.SelectDevice }}</el-button
        >
      </el-divider>
      <el-table
        :data="list"
        element-loading-text="Loading"
        fit
        highlight-current-row
        height="100px"
      >
        >
        <el-table-column :label="dataList.DeviceNumber">
          <template slot-scope="scope">
            {{ scope.row.num }}
          </template>
        </el-table-column>
        <el-table-column
          :label="
            $i18n.locale === 'en' ? dataList.DeviceEName : dataList.DeviceName
          "
        >
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.DeviceSpecifications">
          <template slot-scope="scope">
            {{ scope.row.specifications }}
          </template>
        </el-table-column>

        <el-table-column :label="dataList.DeviceClassifyId">
          <template slot-scope="scope">
            {{ scope.row.classifyName }}
          </template>
        </el-table-column>

        <el-table-column :label="dataList.DeviceSupplierName">
          <template slot-scope="scope">
            {{ scope.row.supplierName }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.DeviceFactoryNum">
          <template slot-scope="scope">
            {{ scope.row.factoryNum }}
          </template>
        </el-table-column>

        <el-table-column :label="dataList.DeviceStatus">
          <template slot-scope="scope">
            {{ scope.row.statusName }}
          </template>
        </el-table-column>
        <el-table-column
          :label="
            $i18n.locale === 'en'
              ? dataList.eDeviceStorageAddress
              : dataList.DeviceStorageAddress
          "
        >
          <template slot-scope="scope">
            {{ scope.row.storageAddress }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.DevicePersonResponsibleId">
          <template slot-scope="scope">
            {{ scope.row.personResponsibleName }}
          </template>
        </el-table-column>

        <el-table-column :label="dataList.Operation">
          <template slot-scope="scope">
            <div class="base-table-operation">
              <el-link
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index)"
                >{{ btn.Delete }}</el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-divider class="el-divider-specail" content-position="left"
        ><span>{{ dataList.InspectionPlan }}</span>
      </el-divider>
      <el-form
        ref="formData"
        class="base-pipeline-layout system-user-form"
        :label-width="$i18n.locale === 'en' ? '150px' : '100px'"
        :model="formData"
        :rules="formDataRules"
        status-icon
      >
        <el-form-item
          style="width: 100%"
          :label="dataList.Inspector"
          prop="verificationPersonId"
          :error="errorMsg.num"
        >
          <div style="width: 30%; float: left">
            <UserDropDownList
              :value="formData.verificationPersonId"
              :return-objct.sync="returnObjct"
              @getData="verificationPersonChange"
            />
          </div>
        </el-form-item>
        <el-form-item
          style="width: 100%"
          :label="dataList.ScheduledInspectionTime"
          prop="planDate"
          :error="errorMsg.planDate"
        >
          <el-date-picker
            v-model="formData.planDate"
            style="width: 30%; float: left"
            type="date"
            :placeholder="dataList.SelectDateTime"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>

        <el-form-item
          style="width: 100%"
          :label="dataList.InspectionTarget"
          prop="verificationObjectList"
          :error="errorMsg.verificationObjectList"
        >
          <DicCheckBoxGroupList
            v-model="formData.verificationObjectList"
            dict-code="verificationObject"
          ></DicCheckBoxGroupList>
        </el-form-item>
        <el-form-item
          style="width: 100%"
          :label="dataList.InspectionMethod"
          prop="verificationWayList"
          :error="errorMsg.verificationWayList"
        >
          <DicCheckBoxGroupList
            v-model="formData.verificationWayList"
            dict-code="verificationWay"
          ></DicCheckBoxGroupList>
        </el-form-item>
        <el-form-item
          :label="dataList.InspectionProcedure"
          prop="verificationMethod"
          :error="errorMsg.verificationMethod"
        >
          <el-input
            v-model="formData.verificationMethod"
            type="textarea"
            maxlength="100"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="onSubmit('formData')">{{
          btn.Save
        }}</el-button>
        <el-button @click="cancel">{{ btn.Cancel }}</el-button>
      </div>
      <DeviceDialogList
        v-if="choiceDeviceVisible"
        :dialog-form-visible.sync="choiceDeviceVisible"
        :not-display-text="notDisplayText"
        :choice-device-num.sync="choiceDeviceNum"
        @checkedRowsFun="closeChoiceDevice"
      />
    </el-dialog>
  </div>
</template>

<script>
import { create } from "../../../api/DeviceVerificationTask.js";
import DeviceDialogList from "../../../components/DeviceDialogList.vue";
import UserDropDownList from "../../../components/UserDropDownList.vue";
import DicCheckBoxGroupList from "../../../components/DicCheckBoxGroupList.vue";
export default {
  name: "DeviceVerificationTaskAddDialog",
  components: { DeviceDialogList, UserDropDownList, DicCheckBoxGroupList },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      choiceDeviceNum: 1,
      notDisplayText: [this.$t("ModuleDevice.Device.Scrap")],
      returnObjct: true,
      choiceDeviceVisible: false,
      list: [],
      loading: false,
      formLabelWidth: "100px",
      initData: {
        id: 0,
        num: "",
        deviceNum: "",
        verificationPlanNum: "",
        type: 0,
        typeName: "",
        verificationObject: "",
        verificationWay: "",
        verificationMethod: "",
        planDate: null,
        status: 0,
        statusName: "",

        verificationPersonId: null,
        verificationPersonName: "",
        remark: "",
        content: "",
        conclusion: 0,
        conclusionName: "",
        conclusionReason: "",
        deviceStatus: 0,
        deviceStatusName: "",
      },
      formData: {
        id: 0,
        num: "",
        deviceNum: "",
        verificationPlanNum: "",
        type: 0,
        typeName: "",
        verificationObject: "",
        verificationWay: "",
        verificationMethod: "",
        verificationObjectList: [],
        verificationWayList: [],
        planDate: new Date(),
        status: 0,
        statusName: "",
        verificationPersonId: null,
        verificationPersonName: "",
        remark: "",
        content: "",
        conclusion: 0,
        conclusionName: "",
        conclusionReason: "",
        deviceStatus: 0,
        deviceStatusName: "",
      },
      formDataRules: {
        verificationObjectList: [
          {
            type: "array",
            required: true,
            trigger: "blur",
            validator: this.Helper.validateArrayAndTextFunction,
          },
        ],
        verificationWayList: [
          {
            type: "array",
            required: true,
            trigger: "blur",
            validator: this.Helper.validateArrayAndTextFunction,
          },
        ],
        verificationMethod: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        planDate: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        verificationPersonId: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
      },
      initErrorMsg: {
        num: "",
        deviceNum: "",
        verificationPlanNum: "",
        type: "",
        typeName: "",
        verificationObject: "",
        verificationWay: "",
        verificationMethod: "",
        planDate: "",
        status: "",
        statusName: "",
        verificationPersonId: "",
        verificationPersonName: "",
        remark: "",
        content: "",
        conclusion: "",
        conclusionName: "",
        conclusionReason: "",
        deviceStatus: "",
        deviceStatusName: "",
      },
      errorMsg: {
        num: "",
        deviceNum: "",
        verificationPlanNum: "",
        type: "",
        typeName: "",
        verificationObject: "",
        verificationWay: "",
        verificationMethod: "",
        planDate: "",
        status: "",
        statusName: "",
        verificationPersonId: "",
        verificationPersonName: "",
        remark: "",
        content: "",
        conclusion: "",
        conclusionName: "",
        conclusionReason: "",
        deviceStatus: "",
        deviceStatusName: "",
      },
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  watch: {},
  created() {},
  methods: {
    verificationPersonChange(val) {
      this.formData.verificationPersonId = val.id;
    },
    handleDelete(index) {
      this.list.splice(index, 1);
    },

    borrowPersonChange(val) {
      this.formData.verificationPersonId = val.value;
      this.formData.verificationPersonName = val.label;
    },
    // 关闭选择设备弹框
    closeChoiceDevice(data) {
      if (data != null && data.length !== 0) {
        this.formData.verificationPersonId = data[0].personResponsibleId;
      } else {
        this.formData.verificationPersonId = null;
      }
      this.formData.deviceId = data[0].id;
      this.list = data;
    },
    // 选择设备
    choiceDevice() {
      this.choiceDeviceVisible = true;
    },
    cancel() {
      this.$emit("update:dialogFormVisible", false);
    },
    closeDialog() {
      this.$parent.getList();
      this.cancel();
    },
    onSubmit() {
      if (this.list == null || this.list.length === 0) {
        this.$message.warning(this.$t("ModuleDevice.Message.EqiupEmpty"));
        return false;
      }
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.loading = true;
          var verificationObjectArray = [];
          this.formData.verificationObjectList.map((item) => {
            verificationObjectArray.push(item.value);
          });
          var verificationWayArray = [];
          this.formData.verificationWayList.map((item) => {
            verificationWayArray.push(item.value);
          });
          this.formData.verificationObject = verificationObjectArray.join(",");
          this.formData.verificationWay = verificationWayArray.join(",");
          this.formData.status = "10";
          this.formData.statusName = this.dataList.Pending;
          this.formData.verificationTypeEnum = 20;
          this.errorMsg = this.Helper.deepCopy(this.initErrorMsg);
          create(this.formData)
            .then((res) => {
              if (res.code === 200) {
                this.closeDialog();
              } else {
                this.showValidateMsgCheck(res);
              }
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },
    showValidateMsgCheck(res) {
      if (res.msg) {
        this.Helper.showValidateMsg("num", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("deviceNum", this.errorMsg, res.msg);
        this.Helper.showValidateMsg(
          "verificationPlanNum",
          this.errorMsg,
          res.msg
        );
        this.Helper.showValidateMsg("type", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("typeName", this.errorMsg, res.msg);
        this.Helper.showValidateMsg(
          "verificationObject",
          this.errorMsg,
          res.msg
        );
        this.Helper.showValidateMsg("verificationWay", this.errorMsg, res.msg);
        this.Helper.showValidateMsg(
          "verificationMethod",
          this.errorMsg,
          res.msg
        );
        this.Helper.showValidateMsg("planDate", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("status", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("statusName", this.errorMsg, res.msg);

        this.Helper.showValidateMsg(
          "verificationPersonName",
          this.errorMsg,
          res.msg
        );
        this.Helper.showValidateMsg("remark", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("content", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("conclusion", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("conclusionName", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("conclusionReason", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("deviceStatus", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("deviceStatusName", this.errorMsg, res.msg);
      }
    },
  },
};
</script>
